<template>
  <div class="tyoeContent">
    <div class="contentTypename">
      <img style="height:22px;width:22px;padding-top:1px;" src="../assets/img/type.png">
      <div class="contentTypename-1">
        {{newList.name}}
      </div>
      <div @click="goType" class="contentTypename-2">
        查看更多
        <i style="font-size: 9px;" class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div 
      v-for="item,index in newList.content"
      :key="index"
      class="newsHotcontent" 
      @mouseover="mouseover(index)"
			@mouseleave="mouseleave(index)"
      @click="golookNews(item)">
      <div class="hovername" :style="{height:hotshowimgindex == index? '107px':'0px',
                                      opacity:hotshowimgindex == index? '1':'0'}">
        <div class="demo-image__error newsHotcontentimg">
          <div class="imgdiv">
            <el-image class="newsHotcontentimg1"
                    :src="item.cover"
                    :fit="'cover'">
                    <div slot="error">
                      <i class="el-icon-loading"></i>
                    </div>
            </el-image>
          </div>
          <div class="typeindex"
              :style="{backgroundColor: index == 0 ? '#FE2D46' :
              index == 1 ? '#FF6600' :
              index == 2 ? '#FAA90E' : '#FAA90E',}">
              {{index+1}}
          </div>
        </div>
        <div class="textContent">
          <div class="textName">{{item.aname}}</div>
          <div class="testNumber">
            热搜指数：{{item.fanwen}}
            <img v-show="item.aredu != 0" class="imgup" src="../assets/img/icon-up.png">
          </div>
          <div class="testNumber">{{item.author}}</div>
        </div>
      </div>
      <div v-show="hotshowimgindex != index" class="listContent">
        <div  :style="{color:index == 0 ? '#FE2D46' :
              index == 1 ? '#FF6600' :
              index == 2 ? '#FAA90E' : '#9195A3'}"
              class="newsHotindex">
              {{index + 1}}
        </div>
        <div class="listContentName">{{item.aname}}</div>
        <div class="istContentNum">
          {{item.fanwen}}
          <img v-if="item.aredu != 0" class="imgup" src="../assets/img/icon-up.png">
          <img v-else class="imgup" src="../assets/img/icon-same.png">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    newList:{
      type:Object,
      default:function(){
        return {}
      }
    }
  },
  data(){
    return {
      singImg:[],
      hotshowimgindex:0,
      mouseleavesetTimeout:Object,
      mouseoversetTimeout:Object,
    }
  },
  methods:{
    //获取图片
    queryimg(index,id){
			let i = this.singImg.indexOf(id)
			if(i != -1) return
			this.singImg.push(id)
			this.$http.post('/api/cover',{aid:id}).then(res => {
        if(res.status == 0){
					this.newList.content[index].cover = res.message[0].cover
        }else{
					this.singImg.forEach(item => {
						if(item == id ) item = null
					})
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
				this.singImg.forEach(item => {
						if(item == id ) item = null
					})
        this.$message({
            message: err,
            type: 'error'
          });
      })
		},
    //热点新闻鼠标移入
		mouseover(index){
			clearTimeout(this.mouseoversetTimeout)
			clearTimeout(this.mouseleavesetTimeout)
      if(this.newList.content[index].cover == ''){
        this.queryimg(index,this.newList.content[index]._id)
      }
			this.mouseoversetTimeout = setTimeout(() => {
				this.hotshowimgindex = index
			}, 300);
		},
    golookNews(item){
			window.open('/client/lookNews?aid=' + item._id)
		},
    goType(){
      this.$emit('goType',this.newList.name)
    },
		//热点新闻鼠标移出
		mouseleave(){
			clearTimeout(this.mouseoversetTimeout)
			clearTimeout(this.mouseleavesetTimeout)
			this.mouseleavesetTimeout = setTimeout(() => {
				this.hotshowimgindex = 0
			}, 300);
		},
  }
}
</script>
<style scoped>
.tyoeContent{
	width: 300px;
	height: 413px;
	margin-bottom: 40px;
}
.contentTypename{
	display: flex;
	height: 25px;
	align-items: center;
}
.contentTypename-1{
	flex: 1;
  font-size: 18px;
	padding-left: 5px;
	color: #faa90e;
}
.contentTypename-2{
	color: #9195a3;
	font-size: 13px;
  line-height: 13px;
	display: inline;
	padding-right: 10px;
	cursor: pointer;
}
.newsHotcontent{
	cursor: pointer;
	margin-top: 10px;
	border: 0;
  transition: 0.4s;
  border-radius: 0 15px 15px 0;
}
.newsHotcontent:hover{
  background-color: rgba(247, 247, 248,0.6);
}
.newsHotcontentimg{
  border-radius: 15px;
  width: 80px;
  height: 107px;
}
.newsHotcontentimg1{
  border-radius: 15px;
  width: 80px;
  height: 107px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.imgdiv{
  width: 80px;
  height: 107px;
  border-radius: 0 15px 15px 0;
  background-color: white;
}
.hovername{
  display: flex;
  overflow: hidden;
  transition: 0.4s;
  height:107px;
}
.textContent{
  flex: 1;
  margin: 15px 20px 0 15px;
}
.textName{
  font-size: 14px;
  line-height: 22px;
  color: #222;
  width: 180px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.testNumber{
  display: flex;
  align-items: center;
  height: 13px;
  margin-top: 10px;
  color: #626675;
  font: 13px Arial, sans-serif;
}
.imgup{
  width: 15px;
  height: 15px;
}
.typeindex{
  background-color: #FF9812;
  width: 20px;
  height: 20px;
  border-radius: 10px 0 10px 0;
  position: relative;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -109px;
  font-size: 13px;
}
.listContent{
  display: flex;
  align-items: center;
}
.newsHotindex{
  font-size: 16px;
}
.listContentName{
  flex: 1;
  padding-left: 10px;
  padding-left: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #222;
}
.istContentNum{
  width: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #9195a3;
  font-size: 13px;
}
</style>